<template>
  <div class="home">
    <!-- 定义页面结构 -->

    <div class="header">
      <span>家政服务</span>
    </div>
    <!-- 顶部轮番区域 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="swipe in writerSwipData" :key="swipe.id">
          <img :src="swipe.url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="menu">
      <div class="item1">
        <div>
          <van-image
            top:10px
            width="40px"
            height="40px"
            @click="toOrder"
            src="https://iconfont.alicdn.com/s/4aa049ad-74b3-434c-85dd-38219b7d653f_origin.svg"
          />

          <!-- <van-icon name="chat-o" size="40px" dot @click="toOrder" /> -->
        </div>
        <p>订单</p>
      </div>
      <div class="item1">
        <div>
          <van-image
            top:10px
            width="40px"
            height="40px"
            @click="toProfit"
            src="https://iconfont.alicdn.com/s/3db61f77-87f4-4c72-a509-938f8437c3fa_origin.svg"
          />
          <!-- <van-icon name="gold-coin-o" size="40px" @click="toProfit" /> -->
        </div>
        <p>收益</p>
      </div>
      <div class="item1">
        <div>
          <van-image
            top:10px
            width="40px"
            height="40px"
            src="https://iconfont.alicdn.com/s/7785510e-c0d6-4a4a-aedf-d61d43ec641a_origin.svg"
          />
          <!-- <van-icon name="smile-o" size="40px" /> -->
        </div>
        <p>帮助</p>
      </div>
      <div class="item1">
        <div>
          <van-image
            top:10px
            width="40px"
            height="40px"
            @click="toMine"
            src="https://iconfont.alicdn.com/s/b1e0c0be-be24-4eff-b684-3294aaf20f8f_origin.svg"
          />
          <!-- <van-icon name="setting-o" size="40px" @click="toMine" /> -->
        </div>
        <p>我的</p>
      </div>
    </div>
    <!-- 订单展示区域 -->

    <div class="order">
      <div>我的订单</div>
      <van-card
        v-for="item in orderData"
        :key="item.id"
        :price="timestampToTime(item.orderTime)"
        :desc="
          item.address.province +
          item.address.city +
          item.address.area +
          item.address.address
        "
        :title="item.customer.username"
        :thumb="item.customer.userFace"
        currency=""
        @click="toOrderInfo(item)"
      >
        <template #tags>
          <van-tag v-if="item.status == '已完成'" plain type="success">{{
            item.status
          }}</van-tag>
          <van-tag v-else-if="item.status == '待派单'" plain type="warning">{{
            item.status
          }}</van-tag>
          <van-tag v-else plain type="danger">{{ item.status }}</van-tag>
        </template>
        <template #footer>
          <van-tag plain>¥{{ item.total }}</van-tag>
        </template>
      </van-card>
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
import { get } from "@/http/axios";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      page: 1,
      pageSize: 20,
      status: "正常",
      userId: "",
      writerSwipData: [],
      orderData: [],
      customerData: [],
      active: 0,
    };
  },
  computed: {
    ...mapState("user", ["token"]),
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    ...mapActions("user", ["getUserInfo"]),
    onChange() {},

    async getALLSwipeData() {
      let data = {
        status: this.status,
      };
      let res = await get("/carousel/query", data);
      this.writerSwipData = res.data.data;
    },
    getAllOrderData() {
      this.getUserInfo().then(async (r) => {
        let data = {
          page: this.page,
          pageSize: this.pageSize,
          employeeId: r.data.data.id,
        };
        let res = await get("/order/pageQuery", data);
        this.orderData = res.data.data.list;

      });
      // this.userId = this.userInfo.id;
    },

    toOrder() {
      this.$router.push({
        path: "/manager/order",
      });
    },
    toOrderInfo(item) {
      this.$router.push({
        path: "/manager/orderinfo",
        query: {
          item,
        },
      });
    },
    toProfit() {
      this.$router.push({
        path: "/manager/profit",
      });
    },
    toMine() {
      this.active = 3
      this.$router.push({
        path: "/manager/mine",
      });
    },
    timestampToTime(time) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(time);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "/" + MM + "/" + d + "  " + h + ":" + m + ":" + s;
    },
  },
  created() {
    this.getALLSwipeData();
    this.getAllOrderData();
  },
};
</script>
<style scoped>
.header {
  font-size: 34px;
  line-height: 1.6;
  letter-spacing: 0.244em;
  font-weight: 500;
  font-style: normal;
  color: white;
  height: 130px;
  text-align: center;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  background: #7cabf7;
  background: -webkit-linear-gradient(to bottom, #a1c4fd, #c2e9fb);
  background: linear-gradient(to bottom, #a1c4fd, #c2e9fb);
}
.swipe {
  width: 80%;
  height: 140px;
  position: absolute;
  background-color: #9002bf;
  top: 136px;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
}
.my-swipe {
  position: relative;
  overflow: hidden;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.my-swipe,
.my-swipe img {
  width: 100%;
  height: 140px;
  border-radius: 8px;
}
.menu {
  height: 100px;
  margin-top: 6em;
  padding: 10px 15px;
  display: flex;
}
.item1 {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto;
}
.order {
  margin-top: 1em;
  padding: 0 2em;

  overflow: auto;
}
.home {
  height: 100%;
}
.tu1 {
  position: absolute;
  left: 0px;
}
.tu2 {
  position: absolute;
  right: 0px;
}
</style> 